<template>
	<div
		draggable="true"
		@dragstart="dragstart($event)"
		@drag="drag($event)"
		@dragend="dragend($event)"
		:style="`right:${elRight}px;bottom:${elBottom}px`"
	>
		<slot></slot>
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from 'vue'

	const startclientX = ref(0)
	const startclientY = ref(0)
	const elRight = ref(50)
	const elBottom = ref(70)

	let oldWidth = window.innerWidth
	let oldHeight = window.innerHeight

	const dragstart = (e: DragEvent) => {
		startclientX.value = e.pageX
		startclientY.value = e.pageY
	}

	const drag = (e: DragEvent) => {
		const x = startclientX.value - e.pageX
		const y = startclientY.value - e.pageY
		elRight.value += x
		elBottom.value += y

		elRight.value = Math.min(Math.max(0, elRight.value), window.innerWidth)
		// elBottom.value = Math.min(Math.max(0, elBottom.value), document.documentElement.scrollHeight)

		startclientX.value = e.pageX
		startclientY.value = e.pageY
	}

	const dragend = (e: DragEvent) => {
		const x = startclientX.value - e.pageX
		const y = startclientY.value - e.pageY
		elRight.value += x
		elBottom.value += y

		elRight.value = Math.min(Math.max(0, elRight.value), window.innerWidth)
		// elBottom.value = Math.min(Math.max(0, elBottom.value), document.documentElement.scrollHeight)
	}

	const handleResize = () => {
		const newWidth = window.innerWidth
		const newHeight = window.innerHeight

		elRight.value = (elRight.value * newWidth) / oldWidth
		elBottom.value = (elBottom.value * newHeight) / oldHeight

		elRight.value = Math.min(Math.max(0, elRight.value), window.innerWidth)
		// elBottom.value = Math.min(Math.max(0, elBottom.value), document.documentElement.scrollHeight)

		oldWidth = newWidth
		oldHeight = newHeight
	}

	onMounted(() => {
		window.addEventListener('resize', handleResize)
	})

	onUnmounted(() => {
		window.removeEventListener('resize', handleResize)
	})
</script>
<style></style>
